<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8" />
		<script src="static/confirm/js/jquery-3.1.1.min.js"></script>
		<link rel="stylesheet" type="text/css" href="/static/confirm/css/JD2.css" />

		<title></title>
		<style>
			.headera div.Logo-tu span{ margin: 24px 45px;}
		</style>
	</head>

	<body>
		<!--顶部-->
		<header>
			<div class="header">
				<ul class="header-left">
					<li>
						<img src="/static/confirm/img/header_1.png"/>
						<a href="http://cloudmall.com">云商城首页</a>
					</li>
					<li class="header-l-2">
						<i class="fa fa-map-marker" style="color: #5C5452;"></i>
						<a href="/static/confirm/">北京</a>
						<div class="header-l-d">

							<ul>
								<li><a href="/static/confirm/" style="background: red; color: white;">北京</a></li>
								<li><a href="/static/confirm/">山西</a></li>
								<li><a href="/static/confirm/">内蒙古</a></li>
								<li><a href="/static/confirm/">福建</a></li>
								<li><a href="/static/confirm/">江西</a></li>
								<li><a href="/static/confirm/">西藏</a></li>
								<li><a href="/static/confirm/">新疆</a></li>
							</ul>
							<ul>
								<li><a href="/static/confirm/">上海</a></li>
								<li><a href="/static/confirm/">河南</a></li>
								<li><a href="/static/confirm/">江苏</a></li>
								<li><a href="/static/confirm/">湖北</a></li>
								<li><a href="/static/confirm/">四川</a></li>
								<li><a href="/static/confirm/">陕西</a></li>
								<li><a href="/static/confirm/">港澳</a></li>
							</ul>
							<ul>
								<li><a href="/static/confirm/">天津</a></li>
								<li><a href="/static/confirm/">辽宁</a></li>
								<li><a href="/static/confirm/">山东</a></li>
								<li><a href="/static/confirm/">湖南</a></li>
								<li><a href="/static/confirm/">海南</a></li>
								<li><a href="/static/confirm/">甘肃</a></li>
								<li><a href="/static/confirm/">台湾</a></li>
							</ul>
							<ul>
								<li><a href="/static/confirm/">重庆</a></li>
								<li><a href="/static/confirm/">吉林</a></li>
								<li><a href="/static/confirm/">安徽</a></li>
								<li><a href="/static/confirm/">广东</a></li>
								<li><a href="/static/confirm/">贵州</a></li>
								<li><a href="/static/confirm/">青岛</a></li>
								<li><a href="/static/confirm/">钓鱼岛</a></li>
							</ul>
							<ul>
								<li><a href="/static/confirm/">河北</a></li>
								<li><a href="/static/confirm/">黑龙江</a></li>
								<li><a href="/static/confirm/">浙江</a></li>
								<li><a href="/static/confirm/">广西</a></li>
								<li><a href="/static/confirm/">云南</a></li>
								<li><a href="/static/confirm/">宁夏</a></li>
								<li><a href="/static/confirm/">海外</a></li>
							</ul>


						</div>
					</li>

				</ul>
				<ul class="header-right">
					<li th:if="${session.loginUser==null}">
						<a href="http://sso.cloudmall.com/login.html">你好，请登录</a>
					</li>
					<li th:if="${session.loginUser!=null}">
						<a>亲，[[${session.loginUser.nickname}]],欢迎你！</a>
					</li>
					<li th:if="${session.loginUser==null}">
						<a href="http://sso.cloudmall.com/register.html" class="li_2">免费注册</a>
					</li>
					<li class="spacer"></li>
					<li><a href="http://member.cloudmall.com/home.html">我的订单</a></li>
					<li class="spacer"></li>
					<li>
						<a href="http://member.cloudmall.com/home.html">我的云商城</a>
						<i class="fa fa-angle-down"></i>
						<div class="header-r-1 aa header-r-11">
							<div>
								<ol>
									<dd><a href="/static/confirm/">待处理订单</a></dd>
									<dd><a href="/static/confirm/">返修退换货</a></dd>
									<dd><a href="/static/confirm/">降价商品</a></dd>

								</ol>
								<ol>
									<dd><a href="/static/confirm/">消息</a></dd>
									<dd><a href="/static/confirm/">我的问答</a></dd>
									<dd><a href="/static/confirm/">我的关注</a></dd>

								</ol>

							</div>
							<div>
								<ol>
									<dd><a href="/static/confirm/">我的京豆</a></dd>
									<dd><a href="/static/confirm/">我的白条</a></dd>
								</ol>
								<ol>
									<dd><a href="/static/confirm/">我的优惠劵</a></dd>
									<dd><a href="/static/confirm/">我的理财</a></dd>
								</ol>

							</div>
							<!--<div>
								<h4><a href="/static/confirm/">我的足迹</a><a href="/static/confirm/">更多 ></a> </h4>
								<a href="/static/confirm/"><img src="/static/confirm/image/59ae02fcN529cc4a1.jpg"/></a>
								<a href="/static/confirm/"><img src="/static/confirm/image/59ce706fN6f3f2a4a.jpg"/></a>
								<a href="/static/confirm/"><img src="/static/confirm/image/57b191f2N15993cbb.jpg"/></a>
								<a href="/static/confirm/"><img src="/static/confirm/image/58ff269fN7b7e087b.jpg"/></a>

							</div>-->
						</div>

					</li>
				</ul>
				<div style="clear: both;"></div>
			</div>


		</header>

		<!--logo图片-->
		<div class="top-1">
			<img src="/static/confirm/img/logo1.jpg" class="img1" /><span>结算页</span>
			<!--右侧绿色-->
			<img src="/static/confirm/img/08.png" class="img2" />
		</div>

		<form th:action="@{/submitOrder}" method="post">
		<!--主体部分-->
		<p class="p1">填写并核对订单信息</p>
		<div class="section">
			<!--收货人信息-->
			<div class="top-2">
				<span>收货人信息</span>
				<span>新增收货地址</span>
			</div>

			<!--地址-->
			<div class="top-3 rece-addr" th:each="addr : ${confirm.receAddressList}">
				<p th:text="${addr.name}" th:attr="def=${addr.defaultStatus},addrId=${addr.id}"></p><span>[[${addr.name}]] [[${addr.province}]]  [[${addr.city}]]  [[${addr.detailAddress}]]   [[${addr.phone}]]</span>
			</div>
			<p class="p2">更多地址︾</p>
			<div class="hh1"/></div>
		<!--********************************************************************************************-->
		<!--云商城自提-->
		<div class="top-4">
			<p>云商城自提</p>
			<p>省运费·无续重·随时取</p>
			<p class="xiang">详情</p>
		</div>
		<div class="hh1" /></div>

		<!--支付方式-->
		<h4 class="h4">支付方式</h4>

		<div class="top-6">
			<p>货到付款</p>
			<p><span>惠</span>在线支付</p>
		</div>
		<div class="hh1"></div>
		<!--送货清单-->
		<h4 class="h4" style="margin-top: 5px;">送货清单</h4>
		<div class="top_1">
			<div class="to_left">
				<h5><span class="peisong">配送方式</span><span class="dui"><img src="/static/confirm/img/i_03.png"/> 对应商品</span></h5>
				<div class="box">
					云商城快递
				</div>
				<p class="biao">
					<span class="til">标 准 达 ：</span>
					<span class="con">预计 12月16日[今天] 15:00-19:00 送达</span>
					<a href="/static/confirm/#">修改</a>
				</p>
				<div class="updata-1">
					<img src="/static/confirm/img/im_06.png" />
					<span>京准达 标准达</span>
					<span style="color: black;"> 配送服务全面升级</span>
				</div>
				<div class="hh1"></div>
				<p class="tui">
					<span class="til">退换无忧：</span>
					<span class="con">
							<input type="checkbox" />
							自签收后7天内退货，15天内换<span style="font-size: 12px;margin-left: 5px"> ￥ 0.50</span><br />
						<span class="nul">货，</span>可享1次上门取件服务 ﹀
						</span>

				<div class="updata-2">
					<img src="/static/confirm/img/im_11.png" />
					<span>京准达运费大促（限自营中小件）</span>
				</div>

				</p>
				<!--<p class="kg" style="color:#666666;margin-top: 13px;font-size: 12px">总重量 :<span style="color:#999999;font-size: 12px">0.095kg</span></p>-->
			</div>
			<div class="to_right">
				<h5>商家：云商城自营</h5>
				<div><button>换购</button><span>已购满20.00元，再加49.90元，可返回购物车领取赠品</span></div>
				<!--图片-->
				<div class="yun1" th:each="item : ${confirm.orderItemList}">
					<img th:src="${item.image}" class="yun"/>
					<div class="mi">
						<p>[[${item.skuTitle}]]<span style="color: red;"> ￥ [[${#numbers.formatDecimal(item.price,1,2)}]]</span> <span> x[[${item.count}]] </span>
							</p>
						<p>是否有货： <span style="color: red;" th:text="${confirm.hasStocks[item.skuId]==true?'有货':'无货'}"></span></p>
						<p>重量： <span>[[${item.weight}]]</span></p>
						<p class="tui-1"><img src="/static/confirm/img/i_07.png" />支持7天无理由退货</p>
					</div>
				</div>

				<div class="hh1"></div>
				<!--<p>退换无忧 <span class="money">￥ 0.00</span></p>-->
			</div>
		</div>
		<div class="bto">
			<div class="hh2"></div>
			<h4 class="float">发票信息</h4>
			<div class="note float"><img src="/static/confirm/img/i_11.png" /> <span>开企业抬头发票须填写纳税人识别号，以免影响报销</span></div>
			<ul style="clear: both;">
				<li>电子普通发票 <img src="/static/confirm/img/i_14.png" /></li>
				<li>个人</li>
				<li>商品明细</li>
				<li>
					<a href="/static/confirm/">修改</a>
				</li>
			</ul>
			<div class="hh3"></div>
			<h4 class="clear">使用优惠/礼品卡/抵用 ^</h4>
			<ul>
				<li class="red">优惠卡</li>
				<li>礼品卡</li>
				<li>京豆</li>
				<li>余额</li>
				<li>领奖码</li>
			</ul>
			<div class="tuijian clear">
				<input type="checkbox" />
				<span>优惠组合推荐</span>
			</div>
		</div>
		<div class="xia">
			<div class="qian">
				<p class="qian_y">
					<span th:text="${confirm.count}"></span>
					<span>件商品，总商品金额：</span>
					<span class="rmb">￥ [[${#numbers.formatDecimal(confirm.totalAmount,1,2)}]]</span>
				</p>
				<p class="qian_y">
					<span>返现：</span>
					<span class="rmb">  -￥0.00</span>
				</p>
				<p class="qian_y">
					<span>运费： </span>
					<span class="rmb"> &nbsp ￥<b id="fare"></b></span>
				</p>
				<p class="qian_y">
					<span>服务费： </span>
					<span class="rmb"> &nbsp ￥0.00</span>
				</p>
				<p class="qian_y">
					<span>退换无忧： </span>
					<span class="rmb"> &nbsp ￥0.00</span>
				</p>

			</div>
			<input type="hidden" name="orderToken" th:value="${confirm.orderToken}"/>
			<input type="hidden" name="addrId" id="addrIdInput"/>
			<input type="hidden" name="payAmount" id="payAmountInput"/>
			<div class="yfze">
				<p class="yfze_a"><span class="z">应付总额：</span><span class="hq">￥ <b id="payEle"></b></span></p>
				<p class="yfze_b">寄送至： <span id="receAddrEle"></span> 收货人： <span id="receIdEle"></span></p>
			</div>
			<button class="tijiao" type="submit">提交订单</button>

		</div>
		</div>
		</form>
		<div class="headera">
			<div class="Logo-tu">
				<span><img src="/static/confirm/img/service_items_1.png"/></span>
				<span><img src="/static/confirm/img/service_items_2.png"/></span>
				<span><img src="/static/confirm/img/service_items_3.png"/></span>
				<span><img src="/static/confirm/img/service_items_4.png"/></span>
			</div>
			<div class="table">
				<dl>
					<dt><a href="/static/confirm/##">购物指南</a></dt>
					<dd>
						<a href="/static/confirm/##">购物流程</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">会员介绍</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">生活旅行/团购</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">常见问题</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">大家电</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">练习客服</a>
					</dd>
				</dl>
				<dl>
					<dt><a href="/static/confirm/##">配送方式</a></dt>
					<dd>
						<a href="/static/confirm/##">上门自提</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">211限时达</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">配送服务查询</a>
					</dd>
					<dd>
						<a href="/static/confirm/##"></a>
					</dd>
					<dd>
						<a href="/static/confirm/##">海外配送</a>
					</dd>
					<dd></dd>
				</dl>
				<dl>
					<dt><a href="/static/confirm/##">支付方式</a></dt>
					<dd>
						<a href="/static/confirm/##">货到付款</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">在线支付</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">分期付款</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">邮局汇款</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">公司转账</a>
					</dd>
					<dd></dd>
				</dl>
				<dl>
					<dt><a href="/static/confirm/##">售后服务</a></dt>
					<dd>
						<a href="/static/confirm/##">售后政策</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">价格保护</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">退款说明</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">返修/退换货</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">取消订单</a>
					</dd>
					<dd></dd>
				</dl>
				<dl class="dls">
					<dt><a href="/static/confirm/##">特色服务</a></dt>
					<dd>
						<a href="/static/confirm/##">夺宝岛</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">DIY装机</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">延保服务</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">云商城E卡</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">云商城通信</a>
					</dd>
					<dd>
						<a href="/static/confirm/##">云商城gulimall+</a>
					</dd>
				</dl>
			</div>
			<div class="guanyuwomen">
				<ul>
					<li>
						<a href="/static/confirm/##">关于我们</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/confirm/##">联系我们</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/confirm/##">联系客服</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/confirm/##">合作招商</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/confirm/##">商家帮助</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/confirm/##">营销中心</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/confirm/##">手机云商城</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/confirm/##">友情链接</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/confirm/##">销售联盟</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/confirm/##">云商城社区</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/confirm/##">风险检测</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/confirm/##">隐私政策</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/confirm/##">云商城公益</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/confirm/##">English Site</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/confirm/##">Mdeila $ IR</a>
					</li>
				</ul>
			</div>
			<p class="p1">
				<a href="/static/confirm/##"> 京公网安备 11000002000088号</a>|
				<a href="/static/confirm/##"> 京ICP证070359号</a>|
				<a href="/static/confirm/##"> 互联网药品信息服务资格证编号(京)-经营性-2014-0008 </a>|
				<a href="/static/confirm/##">新出发京零 字第大120007号</a>
			</p>
			<p class="p1">
				<a href="/static/confirm/##"> 互联网出版许可证编号新出网证(京)字150号</a>|
				<a href="/static/confirm/##"> 出版物经营许可证</a>|
				<a href="/static/confirm/##"> 网络文化经营许可证京网文 </a>|
				<a href="/static/confirm/##">[2014]2148-348号 </a>|
				<a href="/static/confirm/##"> 违法和不良信息举报电话 </a>|
				<a href="/static/confirm/##">：4006561155 </a>
			</p>
			<p class="p1">
				<a href="/static/confirm/##"> Copyright © 2004-2017 云商城gulimall.com 版权所有</a>|
				<a href="/static/confirm/##"> 消费者维权热线：4006067733 经营证照</a>|
			</p>
			<p class="p1">
				<a href="/static/confirm/##"> 云商城旗下网站：云商城支付</a>|
				<a href="/static/confirm/##"> 云商城云</a>
			</p>
			<p class="p3">
				<img src="/static/confirm/img/54b8871eNa9a7067e.png" />
				<img src="/static/confirm/img/54b8872dNe37a9860.png" />
				<img src="/static/confirm/img/54b8875fNad1e0c4c.png" />
				<img src="/static/confirm/img/5698dc03N23f2e3b8.jpg" />
				<img src="/static/confirm/img/5698dc16Nb2ab99df.jpg" />
				<img src="/static/confirm/img/56a89b8fNfbaade9a.jpg" />
			</p>
		</div>
		<script>
			$(document).ready(function () {
				//是否提示错误
				var orderMsg = '[[${msg}]]';
				if(orderMsg) {
					alert(orderMsg);
				}

                $('.header-right li:nth-of-type(6)').hover(function(){
                    $('.header-r-11').css('display','block')
                },function(){
                    $('.header-r-11').css('display','none')
                })
                $('.header-right li:nth-of-type(12)').hover(function(){
                    $('.header-r-2').css('display','block')
                },function(){
                    $('.header-r-2').css('display','none')
                })
                $('.header-right li:nth-of-type(14)').hover(function(){
                    $('.header-r-3').css('display','block')
                },function(){
                    $('.header-r-3').css('display','none')
                })
                $('.header-l-2').hover(function(){
                    $('.header-l-d').css('display','block')
                },function(){
                    $('.header-l-d').css('display','none')
                })
                $('.header-r-4').hover(function(){
                    $('.h-r-1').css('display','block')
                },function(){
                    $('.h-r-1').css('display','none')
                });

				hight($(".rece-addr p[def='1']").attr("addrId"));
				$(".rece-addr p").click(function () {
					$(".rece-addr p").attr("def",0);
					$(this).attr("def",1);
                    var addrId = $(this).attr("addrId");
					hight(addrId);
				});
            })

			function hight(addrId) {
                $(".rece-addr p").css({"border":"2px solid gray"});
				$(".rece-addr p[def='1']").css({"border":"2px solid red"});
				$.get("http://cloudmall.com/api/wms/wareinfo/fare?addrId="+addrId,function (resp) {
					if (resp.data){
						var pay = [[${#numbers.formatDecimal(confirm.payAmount,1,2)}]];
						var payAmount = pay*1+resp.data.fare*1;
						$("#payEle").text(payAmount);
						$("#addrIdInput").val(addrId);
						$("#payAmountInput").val(payAmount);
						$("#fare").text(resp.data.fare);
						var rece = resp.data.receAddress;
						var addr=rece.province+"  "+rece.city+"  "+rece.detailAddress;
						$("#receAddrEle").text(addr);
						var recer = rece.name+"  "+rece.phone;
						$("#receIdEle").text(recer);
					}else{
						alert("加载运费和地址信息异常")
					}
				});
			}


		</script>
	</body>

</html>